import logo, { ReactComponent } from './logo.svg';
import React from 'react';
import './App.css';
import './components/ScrollLoad/index.css';
import Scrollload from './components/ScrollLoad/ScrollLoad.js';

const data = [
  {
    image: 'http://imagesrcdola.b0.upaiyun.com/0/20141222121421_798.jpg',
    name: '图片名称1',
    label: 'label 创意游戏',
    desc: "手动画个圆圈，你行吗？"
  },
  {
    image: 'http://imagesrcdola.b0.upaiyun.com/0/20141222121421_798.jpg',
    name: '图片名称2',
    label: 'label 创意游戏',
    desc: "手动画个圆圈，你行吗？"
  },
  {
    image: 'http://imagesrcdola.b0.upaiyun.com/0/20141222121421_798.jpg',
    name: '图片名称3',
    label: 'label 创意游戏',
    desc: "手动画个圆圈，你行吗？"
  },
  {
    image: 'http://imagesrcdola.b0.upaiyun.com/0/20141222121421_798.jpg',
    name: '图片名称4',
    label: 'label 创意游戏',
    desc: "手动画个圆圈，你行吗？"
  },
  {
    image: 'http://imagesrcdola.b0.upaiyun.com/0/20141222121421_798.jpg',
    name: '图片名称5',
    label: 'label 创意游戏',
    desc: "手动画个圆圈，你行吗？"
  }
]

class IRender extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: []
    }
  }

  getDataNew = () => {
    return Array.from(new Array(5)).map(() => {
      let item = data[Math.floor(Math.random() * 5)];

      return item
    })
  }

  componentDidMount() {
    let curentPage = 0;
    const pageCount = 5;
    let _this = this;
    const scrollload = new Scrollload(document.querySelector('.container'), function (sl) {
      setTimeout(() => {
        if (curentPage++ < pageCount) {
          const list = _this.getDataNew();
          _this.setState({
            list: _this.state.list.concat(list)
          })
          sl.unLock()
        } else {
          sl.noData()
        }
      }, 500)
    }, {
      window: document.querySelector('.container'),
      loadingTxt: "数据加载中~",
      noDataTxt: "没有更多数据了~"
    });
  }

  render() {
    const {
      list = []
    } = this.state;
    console.log("list count:", list.length)
    return (
      <>
        <div className="container" style={{border:"1px solid #eee", width: '400px', maxHeight:'300px', overflow:'hidden', overflowY:"auto"}}>
          <ul className="list">
            {
              list.map((item, index) => {
                return (
                  <li key={index}>
                    <div className="info">
                      <img className="image" src={item.image} />
                      <div className="desc">
                        <p>{item.name}</p>
                        <span>{item.label}</span>
                        <p>{item.desc}</p>
                      </div>
                    </div>
                    <a className="btn" href="http://m.dolapocket.com/" target="_blank">开始</a>
                  </li>
                )
              })
            }
          </ul>
        </div>
      </>
    )
  }
}

function App() {
  return (
    <div className="App">
      <IRender />
    </div>
  );
}

export default App;
